<!-- 历史接通分析 -->
<template>
	<div id="historyAnswerAnalysis">
		<p class="statis-title card">调解线路接通率情况</p>
		<div class="statis">
			<div class="statis-table w-1/4 card">
				<div class="statis-table-title">线路呼出统计</div>
				<!-- <a-table
					ref="tableRef"
					:columns="columns"
					:data-source="pageListData"
					:bordered="false"
					:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
					:pagination="false"
					:scroll="{ y: 600 }"
					size="small"
				>
					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'callCompletionRate'">
							<a-space> {{ (record.callCompletionRate * 100).toFixed(2) }}% </a-space>
						</template>
					</template>
				</a-table> -->
				<div class="statis-table-list">
					<div class="table-list-title">
						<div>线路</div>
						<div>呼出总数</div>
						<div>呼出接通率</div>
					</div>
					<vue3ScrollSeamless class="table-list-item-outer" :classOptions="classOptions" :dataList="pageListData">
						<div v-for="(item, i) in pageListData" :key="i" class="table-list-item">
							<div>
								<a-tooltip>
									<template #title>{{ item.lineName }}</template>
									{{ item.lineName }}
								</a-tooltip>
							</div>
							<div>{{ item.callTotal }}</div>
							<div>{{ (item.callCompletionRate * 100).toFixed(2) }}%</div>
						</div>
					</vue3ScrollSeamless>
				</div>
			</div>
			<div class="statis-chart w-3/4 card">
				<div id="chartTop"></div>
				<div id="chartBottom"></div>
			</div>
		</div>
	</div>
</template>
<script setup name="historyAnswerAnalysis">
	import { onMounted, onUnmounted, nextTick } from 'vue'
	import * as echarts from 'echarts'
	import { throttle } from 'lodash'
	import biChartApi from '@/api/bi/biChartApi.js'
	import { vue3ScrollSeamless } from 'vue3-scroll-seamless'

	// ===========================================DATA======================================================
	const columns = [
		{
			title: '线路',
			dataIndex: 'lineName',
			width: '40%'
		},
		{
			title: '呼出总数',
			dataIndex: 'callTotal'
		},
		{
			title: '呼出接通率',
			dataIndex: 'callCompletionRate'
		}
	]
	let pageListData = ref([])
	let tableRef = ref()
	let colorList = ['#2657D1', '#5794F7', '#1A3FBE', '#708CE1', '#2A5CEA', '#96BAE4'] //antdv色值
	let chartTopDom
	let chartBottomDom
	let mixChartTop
	let mixChartBottom
	let mixChartTopOption = ref({
		color: colorList,
		title: {
			text: '呼叫调解统计',
			textStyle: {
				color: '#fff',
				fontWeight: 400,
				fontSize: 16
			},
			left: '2%'
		},
		tooltip: {
			trigger: 'axis',
			backgroundColor: 'rgba(24, 35, 62, 0.9)',
			borderColor: '#1E4B9C',
			textStyle: {
				color: '#fff',
				align: 'left' // 文本左对齐
			}
		},
		grid: {
			top: '20%',
			left: '5%',
			right: '5%',
			bottom: '10%'
		},
		legend: {
			data: ['呼出总数（个）', '呼出接通总数（个）'],
			textStyle: {
				color: '#fff'
			}
		},
		xAxis: [
			{
				type: 'category',
				data: ['职场1', '职场2', '职场3', '职场4', '职场5', '职场6', '职场7'],
				axisPointer: {
					type: 'shadow'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				// name: '总数',
				// min: 0,
				// max: 250,
				// interval: 50,
				axisLabel: {
					formatter: '{value}'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				},
				nameTextStyle: {
					// Y轴名称的样式
					color: '#fff',
					padding: [0, 0, 0, 0] // 调整位置，防止文字遮挡
				},
				splitLine: {
					// 分割线样式
					lineStyle: {
						color: 'rgba(255,255,255,0.1)'
					}
				}
			},
			{
				type: 'value',
				// name: '时长',
				// min: 0,
				// max: 25,
				// interval: 5,
				axisLabel: {
					formatter: '{value}'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				},
				nameTextStyle: {
					// Y轴名称的样式
					color: '#fff',
					padding: [0, 0, 0, 0] // 调整位置，防止文字遮挡
				},
				splitLine: {
					// 分割线样式
					lineStyle: {
						color: 'rgba(255,255,255,0.1)'
					}
				}
			}
		],
		series: [
			{
				name: '呼出总数（个）',
				type: 'bar',
				data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
			},
			{
				name: '呼出接通总数（个）',
				type: 'bar',
				data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
			},
			{
				name: '呼出接通率',
				type: 'line',
				yAxisIndex: 1,
				showSymbol: false,
				data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
			}
		]
	})
	let mixChartBottomOption = ref({
		color: colorList,
		title: {
			text: '客户分布统计',
			textStyle: {
				color: '#fff',
				fontWeight: 400,
				fontSize: 16
			},
			left: '2%'
		},
		tooltip: {
			trigger: 'axis',
			backgroundColor: 'rgba(24, 35, 62, 0.9)',
			borderColor: '#1E4B9C',
			textStyle: {
				color: '#fff',
				align: 'left' // 文本左对齐
			}
		},
		grid: {
			top: '20%',
			left: '5%',
			right: '5%',
			bottom: '10%'
		},
		legend: {
			data: ['呼出总数（个）', '呼出接通总数（个）'],
			textStyle: {
				color: '#fff'
			}
		},
		xAxis: [
			{
				type: 'category',
				data: ['北京', '上海', '深圳', '浙江', '江苏', '山西', '河南'],
				axisPointer: {
					type: 'shadow'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				// name: '总数',
				// min: 0,
				// max: 250,
				// interval: 50,
				axisLabel: {
					formatter: '{value}'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				},
				nameTextStyle: {
					// Y轴名称的样式
					color: '#fff',
					padding: [0, 0, 0, 0] // 调整位置，防止文字遮挡
				},
				splitLine: {
					// 分割线样式
					lineStyle: {
						color: 'rgba(255,255,255,0.1)'
					}
				}
			},
			{
				type: 'value',
				// name: '时长',
				// min: 0,
				// max: 25,
				// interval: 5,
				axisLabel: {
					formatter: '{value}'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				},
				nameTextStyle: {
					// Y轴名称的样式
					color: '#fff',
					padding: [0, 0, 0, 0] // 调整位置，防止文字遮挡
				},
				splitLine: {
					// 分割线样式
					lineStyle: {
						color: 'rgba(255,255,255,0.1)'
					}
				}
			}
		],
		series: [
			{
				name: '呼出总数（个）',
				type: 'bar',
				data: [10.6, 51.9, 90.0, 26.4, 68.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
			},
			{
				name: '呼出接通总数（个）',
				type: 'bar',
				data: [2.6, 5.9, 92.0, 26.4, 28.7, 88.7, 175.6, 182.2, 66.7, 108.8, 6.0, 2.3]
			},
			{
				name: '呼出接通率',
				type: 'line',
				yAxisIndex: 1,
				showSymbol: false,
				data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
			}
		]
	})
	let classOptions = ref({
		step: 0.3,
		hoverStop: true,
		limitMoveNum: 16
	})
	// ===========================================WATCH=====================================================
	// ===========================================LIFECYCLE HOOKS===========================================
	onMounted(() => {
		// pageList(pagination.value.current)
		setTimeout(async () => {
			chartTopDom = document.querySelector('#historyAnswerAnalysis #chartTop')
			mixChartTop = echarts.init(chartTopDom)
			chartBottomDom = document.querySelector('#historyAnswerAnalysis #chartBottom')
			mixChartBottom = echarts.init(chartBottomDom)
			//数据请求
			const biResult = await getData()
			// console.log('HISTORY_ANSWER_RATE_ANALYSIS_DAY', biResult)
			//活跃线路列表
			pageListData.value = biResult.activeLineCall
			classOptions.value.limitMoveNum = biResult.activeLineCall.length
			//呼叫调解统计
			mixChartTopOption.value.xAxis[0].data = []
			mixChartTopOption.value.series[0].data = []
			mixChartTopOption.value.series[1].data = []
			mixChartTopOption.value.series[2].data = []
			biResult.callStatistic.forEach((item, index) => {
				mixChartTopOption.value.xAxis[0].data.push(item.currentDate.substr(5))
				mixChartTopOption.value.series[0].data.push(item.callTotal)
				mixChartTopOption.value.series[1].data.push(item.callCompletionTotal)
				// mixChartTopOption.value.series[2].data.push(item.callCompletionRate)
			})
			mixChartTop.setOption(mixChartTopOption.value)

			//客户分布统计
			mixChartBottomOption.value.xAxis[0].data = []
			mixChartBottomOption.value.series[0].data = []
			mixChartBottomOption.value.series[1].data = []
			mixChartBottomOption.value.series[2].data = []
			biResult.customerDistribution.forEach((item, index) => {
				mixChartBottomOption.value.xAxis[0].data.push(item.areaName)
				mixChartBottomOption.value.series[0].data.push(item.callTotal)
				mixChartBottomOption.value.series[1].data.push(item.callCompletionTotal)
				// mixChartBottomOption.value.series[2].data.push(item.callCompletionRate)
			})
			mixChartBottom.setOption(mixChartBottomOption.value)
		}, 1000)
		// 自适应大小
		const historyAnswerResize = throttle(() => {
			setTimeout(() => {
				mixChartTop && mixChartTop.resize()
				mixChartBottom && mixChartBottom.resize()
			}, 500)
		}, 200)
		window.addEventListener('resize', historyAnswerResize)
	})
	// 组件卸载时清理
	onUnmounted(() => {
		window.removeEventListener('resize', historyAnswerResize)
		mixChartTop?.dispose()
		mixChartBottom?.dispose()
	})
	// ===========================================METHODS==================================================
	// ===========================================REQUEST==================================================
	//请求分页列表数据
	const pageList = (current) => {
		for (let i = 0; i < 50; i++) {
			pageListData.value.push({
				id: i,
				label1: '北京',
				label2: i,
				label3: '100%'
			})
		}
	}
	const getData = async () => {
		const res = await biChartApi.getResultByType('HISTORY_ANSWER_RATE_ANALYSIS_DAY')
		return JSON.parse(res.biResult)
	}
</script>
<style lang="less" scoped>
	#historyAnswerAnalysis {
		.statis-title {
			font-size: 20px;
			font-weight: 600;
			text-align: left;
			margin-bottom: 0;
			letter-spacing: 4px;
			line-height: 20px;
		}
		.statis {
			flex: 1;
			display: flex;
			margin-top: 10px;
			height: calc(100% - 208px);
			.statis-table {
				display: flex;
				flex-direction: column;
				margin-right: 10px;
				.statis-table-title {
					margin-bottom: 15px;
					font-size: 17px;
					font-weight: 400;
					text-align: left;
				}
				//重写列表样式
				// :deep(.ant-table-wrapper) {
				// 	flex: 1;
				// 	.ant-spin-nested-loading,
				// 	.ant-spin-container,
				// 	.ant-table {
				// 		height: 100%;
				// 	}
				// 	.ant-table {
				// 		color: #fff;
				// 		background: transparent;
				// 		.ant-table-container {
				// 			display: flex;
				// 			flex-direction: column;
				// 			height: calc(100% - 40px);
				// 			.ant-table-header {
				// 				background: #1c284d;
				// 				.ant-table-cell::before {
				// 					content: '';
				// 					width: 0;
				// 					height: 0;
				// 				}
				// 				.ant-table-cell-scrollbar {
				// 					display: none;
				// 				}
				// 			}
				// 			.ant-table-body {
				// 				flex: 1;
				// 				max-height: calc(100vh - 20rem) !important;
				// 				&::-webkit-scrollbar {
				// 					width: 6px;
				// 					height: 6px;
				// 				}
				// 				&::-webkit-scrollbar-thumb {
				// 					background: #3d76f6;
				// 					border-radius: 3px;
				// 				}
				// 				&::-webkit-scrollbar-track {
				// 					background: rgba(255, 255, 255, 0.1);
				// 					border-radius: 3px;
				// 				}
				// 				.table-striped td {
				// 					background: #1c284d;
				// 				}
				// 			}
				// 			.ant-table-cell {
				// 				color: #fff;
				// 				background: transparent;
				// 				border: none;
				// 			}
				// 			.ant-table-row {
				// 				background: transparent;
				// 			}
				// 		}
				// 	}
				// }

				.statis-table-list {
					height: calc(100% - 40px);
					.table-list-title {
						height: 40px;
						line-height: 38px;
						display: flex;
						background: #1c284d;
						> div {
							width: 33.33%;
							text-align: center;
							font-weight: 500;
						}
					}
					.table-list-item-outer {
						height: calc(100% - 40px);
						overflow-y: auto;
						&::-webkit-scrollbar {
							display: none;
						}
						.table-list-item {
							height: 38px;
							text-align: center;
							line-height: 38px;
							display: flex;
							padding: 0 10px;
							> div {
								width: 33.33%;
								text-align: center;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
						.table-list-item:nth-child(even) {
							background: #1c284d;
						}
						.table-list-item:nth-child(odd) {
							background: #1a233c;
						}
					}
				}
			}
			.statis-chart {
				display: flex;
				flex-direction: column;
				> div {
					flex: 1;
				}
				> div:last-child {
					margin-top: 30px;
				}
			}
		}
	}
</style>
